<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>采集任务管理 - AI Crawlers</title>
    <!-- 本地CSS资源 -->
    <link href="/assets/libs/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/libs/css/all.min.css" rel="stylesheet">
    <link href="/assets/libs/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <link href="../../assets/css/common.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <!-- 头部 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <div class="container-fluid">
                <a class="navbar-brand" href="../../index.html">
                    <i class="fas fa-robot me-2"></i>AI Crawlers
                </a>
                <span class="navbar-text text-white">采集任务管理</span>
            </div>
        </nav>

        <!-- 主内容 -->
        <div class="container-fluid mt-4">
            <!-- 统计卡片 -->
            <div class="row mb-4">
                <div class="col-md-2">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title text-muted">总任务数</h5>
                            <h2 class="mb-0" id="totalTasks">0</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title text-muted">待执行</h5>
                            <h2 class="mb-0 text-warning" id="pendingTasks">0</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title text-muted">执行中</h5>
                            <h2 class="mb-0 text-info" id="runningTasks">0</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title text-muted">已完成</h5>
                            <h2 class="mb-0 text-success" id="completedTasks">0</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title text-muted">成功率</h5>
                            <h2 class="mb-0 text-primary" id="successRate">0%</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="card text-center bg-primary text-white">
                        <div class="card-body">
                            <button class="btn btn-light btn-lg w-100" id="createTaskBtn">
                                <i class="fas fa-plus me-2"></i>创建任务
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 搜索区域 -->
            <div class="card mb-4">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">任务状态</label>
                            <select class="form-select" id="filterStatus">
                                <option value="">全部</option>
                                <option value="pending">待执行</option>
                                <option value="running">执行中</option>
                                <option value="completed">已完成</option>
                                <option value="cancelled">已取消</option>
                                <option value="failed">失败</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">任务名称</label>
                            <input type="text" class="form-control" id="filterName" placeholder="搜索任务名称">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">&nbsp;</label>
                            <div>
                                <button class="btn btn-primary" id="searchBtn">
                                    <i class="fas fa-search me-2"></i>搜索
                                </button>
                                <button class="btn btn-secondary" id="resetBtn">
                                    <i class="fas fa-redo me-2"></i>重置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 任务列表 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-list me-2"></i>采集任务列表
                    </h5>
                </div>
                <div class="card-body">
                    <table id="taskTable" class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>任务ID</th>
                                <th>任务名称</th>
                                <th>问句数</th>
                                <th>平台数</th>
                                <th>任务状态</th>
                                <th>进度</th>
                                <th>成功率</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 创建任务对话框 -->
    <div class="modal fade" id="createTaskModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">创建采集任务</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="createTaskForm">
                        <!-- 任务名称 -->
                        <div class="mb-3">
                            <label class="form-label">任务名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="taskName" required>
                        </div>

                        <!-- 选择平台 -->
                        <div class="mb-3">
                            <label class="form-label">选择AI平台 <span class="text-danger">*</span></label>
                            <div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" id="platformDeepseek" value="deepseek" checked>
                                    <label class="form-check-label" for="platformDeepseek">DeepSeek</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" id="platformYuanbao" value="yuanbao" checked>
                                    <label class="form-check-label" for="platformYuanbao">元宝</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" id="platformDoubao" value="doubao" checked>
                                    <label class="form-check-label" for="platformDoubao">豆包</label>
                                </div>
                            </div>
                        </div>

                        <!-- 批量选择问句 -->
                        <div class="mb-3">
                            <label class="form-label">批量选择问句 <span class="text-danger">*</span></label>
                            
                            <!-- 快速筛选 -->
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <select class="form-select" id="filterByProduct">
                                        <option value="">按产品筛选...</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <select class="form-select" id="filterByCategory">
                                        <option value="">按类别筛选...</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-primary w-100" id="applyFilterBtn">
                                        <i class="fas fa-filter me-2"></i>应用筛选
                                    </button>
                                </div>
                            </div>

                            <!-- 问句列表 -->
                            <div class="border rounded p-3" style="max-height: 300px; overflow-y: auto;" id="questionListContainer">
                                <p class="text-muted text-center">请使用上方筛选功能加载问句</p>
                            </div>

                            <!-- 已选统计 -->
                            <div class="mt-2">
                                <span class="badge bg-primary" id="selectedCount">已选：0个问句</span>
                                <span class="badge bg-info" id="estimatedCount">预计采集：0次</span>
                            </div>
                        </div>

                        <!-- 备注 -->
                        <div class="mb-3">
                            <label class="form-label">备注</label>
                            <textarea class="form-control" id="taskRemark" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="submitTaskBtn">创建任务</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 任务详情对话框 -->
    <div class="modal fade" id="taskDetailModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">任务详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="taskDetailContent">
                    <!-- 动态加载 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 本地JS资源（支持独立访问） -->
    <script src="/assets/libs/js/jquery.min.js"></script>
    <script src="/assets/libs/js/bootstrap.bundle.min.js"></script>
    <script src="/assets/libs/js/sweetalert2.all.min.js"></script>
    <script src="/assets/libs/js/jquery.dataTables.min.js"></script>
    <script src="/assets/libs/js/dataTables.bootstrap5.min.js"></script>
    <script src="/assets/libs/js/axios.min.js"></script>
    
    <!-- 自定义JS -->
    <script src="../../assets/js/common/config.js"></script>
    <script src="../../assets/js/common/api.js"></script>
    <script src="../../assets/js/pages/task-list.js?v=20251011-13"></script>
</body>
</html>

